﻿<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>药店统计管理</el-breadcrumb-item>
    <el-breadcrumb-item>库存查询</el-breadcrumb-item>
  </el-breadcrumb>
<div style="display: flex;width: 100%">
    <div style="width: 23%">
        <div style="margin-left: 10px" >药品分类</div>
        <div style="margin-left: 10px;margin-top:5px">
           <el-select style="width:95%" size="mini" v-model="type" @change="classify"  placeholder="请选择">
              <el-option
                v-for="item in types"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
    </div>
    <div style="width: 23%">
        <div style="margin-left: 10px" >药品名称</div>
        <div style="margin-left: 10px;margin-top:5px">
           <el-select style="width:95%" size="mini" v-model="namee"  placeholder="请选择">
              <el-option
                v-for="item in names"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
    </div>
    <div style="width: 23%">
        <div style="margin-left: 10px" >出库日期</div>
        <div style="margin-left: 10px;margin-top:5px" class="block">
           <el-date-picker v-model="selectDay" style="width:95%" size="mini" type="date" placeholder="选择日" value-format="yyyy-MM-dd"></el-date-picker>
            
        </div>
    </div>
    <div >
          <el-button type="info" @onclic="btn" style="margin-top:40%" size="small">查询</el-button>
    </div>
</div>
<!-- 库存信息 -->
<div>
   <el-table :header-cell-style="{background:'rgb(55,61,65)',color:'#fff','text-align':'center'}"

    :data="tableData"
    height="350"
    :cell-style="{'text-align':'center'}"

    style="width: 100%">
    <el-table-column
      prop="goods_name"
      label="药品名称"
      width="370">
    </el-table-column>
    <el-table-column
      prop="goodsnum"
      label="库存数量"
      width="370">
    </el-table-column>
    <el-table-column
      prop="message"
      label="库存报警">
      <template slot-scope="scope">
        <label v-if="scope.row.goodsnum<50" style="color:red">警告</label>
        <label v-if="scope.row.goodsnum>=50" style="color:green">正常</label>

      </template>
    </el-table-column>
  </el-table>
</div>

</div>
</template>

<script>
import axios from "axios";
export default {
  components: {},
  props: {},
  data() {
    return {
      tableData: [{
          goods_name: '2016-05-03',
          goodsnum: 30,
          message: '2020-1-6'
        }, {
          goods_name: '2016-05-03',
          goodsnum: 50,
          message: '上海市普陀区金沙江路 1518 弄'
        }, {
          goods_name: '2016-05-03',
          goodsnum: 51,
          message: '上海市普陀区金沙江路 1518 弄'
        }, {
           goods_name: '2016-05-03',
          goodsnum: 0,
          message: '上海市普陀区金沙江路 1518 弄'
        }, {
          goods_name: '2016-05-03',
          goodsnum: 80,
          message: '上海市普陀区金沙江路 1518 弄'
        }, {
           goods_name: '2016-05-03',
          goodsnum: 9,
          message: '上海市普陀区金沙江路 1518 弄'
        }, {
           goods_name: '2016-05-03',
          goodsnum: 90,
          message: '上海市普陀区金沙江路 1518 弄'
        }],
      types:[],
      names:[],
      type:'',
      namee:'',
      value1:'',
      selectDay:new Date(), 
    };
  },
  watch: {},
  computed: {},
  created(){
    this.getdata()
  },
  mounted(){
    
  },
  methods: {
    classify(e){

      console.log(e)
      axios.post('http://172.22.8.91:8080/kucun/get_query_data_by_id'+'?ID='+e)
      .then(response => {
        console.log(response)
        var inf = response.data.data.goods_name
        console.log(inf)
        this.names=JSON.parse(JSON.stringify(inf));
        
      })
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
    },
    getdata(){
      axios.get('http://172.22.8.91:8080/kucun/get_query_data')
      .then(response => {
        console.log(response)
        var inf = response.data.data
        console.log(inf)
        this.types=JSON.parse(JSON.stringify(inf))
        console.log("types",this.types)
      })
      .catch(function (error) { // 请求失败处理
        alert("获取数据失败，请检查网络！")
      });

     
    },
}
};
</script>
<style lang="less" scoped>
.wrapper{}
</style>
